<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>历史对局库</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css" rel="stylesheet">
		<style>
			html {
				background-color: #202020;
				width: 100%;
				min-width: 1400px;
				min-height: 730px;
				height: 100%;
				user-select: none;
			}
			body {
				width: 100%;
				height: 100%;
				margin: 0px;
			}

			.background-pattern {
				position: fixed;
				z-index: -1;
				top: -1030px;
				left: -390px;
				opacity: 0.06;
				font-size: 50px;
				white-space: nowrap;
				line-height: 115px;
				filter: grayscale() drop-shadow(black 0px 0px 4px);
				transform-origin: center center;
				transform: rotate(45deg);
			}
		
			div.header-menu {
				display: flex;
				justify-content: right;
				align-items: center;
				left: 0px;
				width: 100%;
				height: 70px;
				background: linear-gradient(#000B, #0000);
				position: fixed;
				top: 0px;
				z-index: 1;
			}
			.header-menu-item {
				filter: drop-shadow(#FFFA 0px 0px 7px);
				text-decoration: none;
				margin: 10px 30px 0px 10px;
				color: #FFF8;
				font-size: 25px;
				font-family: "Segoe MDL2 Assets";
				cursor: pointer;
			}

			.games-explorer {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.explorer-page-display {
				height: 60px;
				font-size: 60px;
				font-weight: bold;
				font-family: Impact;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 50px;
			}
			.explorer-current-page {
				text-align: right;
				font-family: Impact;
				font-size: 60px;
				font-weight: bold;
				color: #EEE;
				width: 150px;
				overflow: visible;
				background: none;
				outline: none;
				border: none;
				transform-origin: right;
				filter: drop-shadow(#FFF4 0px 0px 8px);
			}
			.explorer-current-page:hover, .explorer-current-page:active { text-decoration: underline; }
			.page-box-bouncing { animation: page-box-bounce 0.2s ease-in-out; }
			@keyframes page-box-bounce {
				0% { transform: scale(1, 1); }
				50% { transform: scale(1.2, 1.2); }
				100% { transform: scale(1, 1); }
			}
			.explorer-total-page {
				color: #555;
				width: 180px;
				filter: drop-shadow(#5554 0px 0px 8px);
			}

			.explorer-control-panel {
				height: 60px;
				width: calc(100% - 400px);
				box-sizing: border-box;
				padding-left: 8px;
				background-color: #333;
				border: #555 1px solid;
				border-radius: 10px;
				margin: 10px 0px 25px 0px;
				filter: drop-shadow(#0004 0px 0px 8px);
				display: flex;
				align-items: center;
			}
			.controller-text {
				color: #888;
				margin: 0px 5px 0px -5px;
				font-size: 20px;
			}
			.controller-input {
				font-family: inherit;
				/* margin-right: 18px;
				width: 210px; */
				margin-right: 13px;
				color: #999;
				background-color: #444;
				outline: none;
				border: #666 1px solid;
				border-radius: 8px;
				height: 35px;
				padding-left: 10px;
				filter: drop-shadow(#0004 0px 0px 5px);
			}
			.text-input {
				color: #999;
				border: #555 1px solid;
				background-color: #282828;
				box-shadow: inset #0004 0px 0px 15px;
				outline: none;
				filter: none;
			}
			input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }
			input[type="number"] {
				appearance: none;
				-moz-appearance: textfield;
			}
			input[type="date"]::-webkit-calendar-picker-indicator {
				position: relative;
				right: 10px;
				color: white;
				filter: invert() brightness(0.7);
			}
			.search-button {
				box-sizing: border-box;
				padding: 5px 7px;
			}
			.search-button:hover { background-color: #666; }
			.search-button:active { background-color: #383838; }

			.explorer-content {
				overflow-x: hidden;
				height: calc(100% - 70px - 120px);
				display: flex;
				flex-direction: row;
				margin-bottom: 30px;
			}
			.page-flip-button {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #EEE;
				font-size: 100px;
				width: 200px;
				height: 100%;
				filter: drop-shadow(#EEE8 0px 0px 10px);
				cursor: pointer;
				z-index: 1;
			}

			.games-grid {
				display: grid;
				width: calc(100% - 400px);
				gap: 20px;
				grid-template-rows: auto auto auto auto;
				grid-template-columns: auto auto auto auto auto;
			}
			.games-grid-sliding-left { animation: games-card-slide-left 0.25s ease-in forwards; }
			@keyframes games-card-slide-left { 100% { transform: translate(-150%, 0px); } }
			.games-grid-sliding-right { animation: games-card-slide-right 0.25s ease-in forwards; }
			@keyframes games-card-slide-right { 100% { transform: translate(150%, 0px); } }
			.games-grid-sliding-from-left { animation: games-card-slide-from-left 0.4s ease-out forwards; }
			@keyframes games-card-slide-from-left {
				0% { transform: translate(-150%, 0px); }
				100% { transform: translate(0px, 0px); }
			}
			.games-grid-sliding-from-right { animation: games-card-slide-from-right 0.4s ease-out forwards; }
			@keyframes games-card-slide-from-right {
				0% { transform: translate(150%, 0px); }
				100% { transform: translate(0px, 0px); }
			}

			.game-card {
				cursor: pointer;
				background-color: #333;
				background-color: #2B2B2B;
				border: #555 1px solid;
				border-radius: 10px;
				box-sizing: border-box;
				padding: 10px;
				overflow: hidden;
				filter: drop-shadow(#000A 0px 0px 8px);
				display: flex;
				animation: game-card-reveal 0.15s linear;
			}
			@keyframes game-card-reveal {
				0% { filter: brightness(1.6); }
				100% { filter: brightness(1); }
			}
			.chessboard-icon {
				color: #555;
				filter: drop-shadow(#000A 0px 0px 6px);
				margin: -3px 10px -3px 0px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.game-winner {
				color: #999;
				font-weight: bold;
				max-width: 70px;
				font-size: 14px;
				margin-top: 4px;
				filter: drop-shadow(#999C 0px 0px 6px);
			}
			.game-winner-large {
				color: #777;
				font-weight: bold;
				font-size: 40px;
				margin-top: -79px;
				filter: drop-shadow(#000A 0px 0px 5px);
			}
			.game-winner-black {
				color: #000;
				filter: drop-shadow(#FFF 0px 0px 10px);
			}
			.game-winner-white {
				color: #DDD;
				filter: drop-shadow(#000 0px 0px 10px);
			}
			.game-infos {
				filter: grayscale();
				font-size: 12px;
				color: #777;
			}
			.game-info {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div class="background-pattern">
			<script>
				for (let i = 0; i < 29; ++i) {
					for (let j = 0; j < 22; ++j) {
						let Rand = Math.random();
						if (Rand < 0.25)
							document.write("⚪　");
						else if (Rand < 0.75)
							document.write("🟢　");
						else
							document.write("🔵　");
					}
					document.write("<br/>");
				}
			</script>
		</div>

		<div class="header-menu">
			<a href="main_page.html" class="header-menu-item" title="返回到开始界面" id="ReturnButton"><i class='fa-solid fa-reply fa-lg' style='color: white'></i></a>
			<a class="header-menu-item" title="只看自己" id="SelfOnlyButton"><i class='fa-solid fa-users-slash fa-lg' style='color: white'></i></a>
			<a class="header-menu-item" title="个人主页" id="UserButton"><i class='fa-solid fa-user fa-lg' style='color: white'></i></a>
		</div>

		<div class="games-explorer">
			<div class="explorer-page-display">
				<input type="number" class="explorer-current-page page-box-bouncing" id="CurrentPageBox" placeholder="1" value="1"/>
				<div class="explorer-total-page" id="TotalPageLabel">/1</div>
			</div>
			<div class="explorer-control-panel">
				<input class="controller-input text-input" id="EmailBox" type="input" placeholder="筛选用户邮箱"/>
				<div class="controller-text">从</div>
				<input class="controller-input date-input" id="BeginDate" type="date" value="2002-10-10"/>
				<div class="controller-text">至</div>
				<input class="controller-input date-input" id="EndDate" type="date" value="2050-12-31"/>
				<div class="controller-input search-button" id="SearchButton"><i class="fa-solid fa-magnifying-glass fa-lg"></i></div>
			</div>
			<div class="explorer-content">
				<div class="page-flip-button page-up-button fa-solid fa-angle-left fa-lg"></div>
				<div class="games-grid">
					<script>
						for (let i = 0; i < 20; ++i)
							document.write(`
								<div class="game-card" style="visibility: hidden; grid-row: ${Math.floor(i / 5)}; grid-column: ${Math.floor(i % 5)};">
									<div class="chessboard-icon fa-solid fa-chess-board fa-5x">
										<div class="game-info game-winner">♥ 100</div>
										<div class="game-info game-winner-large game-winner-black">⚫</div>
									</div>
									<div class="game-infos">
										<div class="game-info" title="对局日期">📆 2023-07-04</div>
										<div class="game-info" title="对局时间">🕒 13:57~14:02</div>
										<div class="game-info" title="黑方玩家">🟤 Redstone Heart</div>
										<div class="game-info" title="白方玩家">⚪ Redstone Heart</div>
										<div class="game-info" title="落子步数">🔄 共20步</div>
									</div>
								</div>
							`);
					</script>
				</div>
				<div class="page-flip-button page-down-button fa-solid fa-angle-right fa-lg"></div>
			</div>
		</div>

		<script>
			// EndDate.valueAsDate = new Date();

			function FormatDate(date) {
				let Year = date.getFullYear();
				let Month = (date.getMonth() < 9 ? "0" : "") + (date.getMonth() + 1);
				let Date = (date.getDate() < 10 ? "0" : "") + date.getDate();
				let Hours = (date.getHours() < 10 ? "0" : "") + date.getHours();
				let Minutes = (date.getMinutes() < 10 ? "0" : "") + date.getMinutes();
				return `${Year}-${Month}-${Date} ${Hours}:${Minutes}`;
			}
			
			function GetMaxPagesCount() { return parseInt(TotalPageLabel.innerHTML.slice(1)); }
			function SetMaxPagesCount(count) { TotalPageLabel.innerHTML = "/" + count; }
			function UpdateTotalPagesCount(callback = () => {}) {
				$.post("/Gomokult_war_exploded/servlet/GetGamePagesCountServlet", {
					"page": CurrentPageBox.value,
					"email": EmailBox.value,
					"startDate": BeginDate.value,
					"endDate": EndDate.value
				}, (count) => {
					SetMaxPagesCount(count);
					callback();
				});
			}
			function CheckPageButton() {
				$(".page-down-button").css("visibility", "visible");
				$(".page-up-button").css("visibility", "visible");
				if (parseInt(CurrentPageBox.value) >= parseInt(TotalPageLabel.innerHTML.slice(1)))
					$(".page-down-button").css("visibility", "hidden");
				if (parseInt(CurrentPageBox.value) <= 1)
					$(".page-up-button").css("visibility", "hidden");
			};
			function SetPageNumber(number) {
				CurrentPageBox.value = Math.min(GetMaxPagesCount(), Math.max(1, number));
				CheckPageButton();
			}
			UpdateTotalPagesCount(() => { CheckPageButton(); });
			CurrentPageBox.onchange = () => { SetPageNumber(parseInt(CurrentPageBox.value)); };

			function ReloadGames() {
				$.post("/Gomokult_war_exploded/servlet/QueryGamesServlet", {
					"page": CurrentPageBox.value,
					"email": EmailBox.value,
					"startDate": BeginDate.value,
					"endDate": EndDate.value
				}, (games) => {
					let Games = JSON.parse(games);
					let HTML = "", Icons = {"black": "⚫", "white": "⚪", "draw": "🔘"};
					for (let i = 0; i < 20; ++i) {
						if (i < Games.length)
							HTML += `
								<div class="game-card" style="grid-row: ${Math.floor(i / 5) + 1}; grid-column: ${Math.floor(i % 5) + 1};" game-id="${Games[i].gameID}">
									<div class="chessboard-icon fa-solid fa-chess-board fa-5x">
										<div class="game-info game-winner">♥ ${Games[i].likesCount}</div>
										<div class="game-info game-winner-large game-winner-${Games[i].winner}">${Icons[Games[i].winner]}</div>
									</div>
									<div class="game-infos">
										<div class="game-info" title="对局日期">📆 ${FormatDate(new Date(Games[i].date)).split(" ")[0]}</div>
										<div class="game-info" title="对局时间">🕒 ${FormatDate(new Date(Games[i].date)).split(" ")[1]}~${FormatDate(new Date(Games[i].date + 1000 * (Games[i].blackDuration + Games[i].whiteDuration))).split(" ")[1]}</div>
										<div class="game-info" title="黑方玩家">🟤 ${Games[i].userBlack.nickname + "&ensp;".repeat(20)}</div>
										<div class="game-info" title="白方玩家">⚪ ${Games[i].userWhite.nickname + "&ensp;".repeat(20)}</div>
										<div class="game-info" title="落子步数">🔄 共${Games[i].piecesSequence.length}步</div>
									</div>
								</div>
							`;
						else
							HTML += `
								<div class="game-card" style="visibility: hidden; grid-row: ${Math.floor(i / 5) + 1}; grid-column: ${Math.floor(i % 5) + 1};">
									<div class="chessboard-icon fa-solid fa-chess-board fa-5x">
										<div class="game-info game-winner">♥ 100</div>
										<div class="game-info game-winner-large game-winner-black">⚫</div>
									</div>
									<div class="game-infos">
										<div class="game-info" title="对局日期">📆 2023-07-04</div>
										<div class="game-info" title="对局时间">🕒 13:57~14:02</div>
										<div class="game-info" title="黑方玩家">🟤 Redstone Heart</div>
										<div class="game-info" title="白方玩家">⚪ Redstone Heart</div>
										<div class="game-info" title="落子步数">🔄 共20步</div>
									</div>
								</div>
							`;
					}
					$(".games-grid").html(HTML);
					$(".game-card").click((event) => {
						while (!event.target.classList.contains("game-card"))
							event.target = event.target.parentNode;
						let GameID = event.target.getAttribute("game-id");
						document.location = `game_viewer.html?game_id=${GameID}`;
					});
				});
			}
			$(".page-down-button").click(() => {
				if (parseInt(CurrentPageBox.value) >= parseInt(TotalPageLabel.innerHTML.slice(1)))
					return;
				else
					CurrentPageBox.value = parseInt(CurrentPageBox.value) + 1;
				CheckPageButton();
				$(".games-grid").removeClass("games-grid-sliding-from-left");
				$(".games-grid").removeClass("games-grid-sliding-from-right");
				$(".games-grid").removeClass("games-grid-sliding-left");
				$(".games-grid").removeClass("games-grid-sliding-right");
				$(".games-grid").addClass("games-grid-sliding-left");
				setTimeout(() => {
					ReloadGames();
					$(".games-grid").removeClass("games-grid-sliding-left");
					$(".games-grid").removeClass("games-grid-sliding-right");
					$(".games-grid").addClass("games-grid-sliding-from-right");

					$(".game-card").click((event) => {
						while (!event.target.classList.contains("game-card"))
							event.target = event.target.parentNode;
						let GameID = event.target.getAttribute("game-id");
						document.location = `game_viewer.html?game_id=${GameID}`;
					});
				}, 200);
			});
			$(".page-up-button").click(() => {
				if (parseInt(CurrentPageBox.value) <= 1)
					return;
				else
					CurrentPageBox.value = parseInt(CurrentPageBox.value) - 1;
				CheckPageButton();
				$(".games-grid").removeClass("games-grid-sliding-from-left");
				$(".games-grid").removeClass("games-grid-sliding-from-right");
				$(".games-grid").removeClass("games-grid-sliding-left");
				$(".games-grid").removeClass("games-grid-sliding-right");
				$(".games-grid").addClass("games-grid-sliding-right");
				setTimeout(() => {
					ReloadGames();
					$(".games-grid").removeClass("games-grid-sliding-left");
					$(".games-grid").removeClass("games-grid-sliding-right");
					$(".games-grid").addClass("games-grid-sliding-from-left");
					
					$(".game-card").click((event) => {
						while (!event.target.classList.contains("game-card"))
							event.target = event.target.parentNode;
						let GameID = event.target.getAttribute("game-id");
						document.location = `game_viewer.html?game_id=${GameID}`;
					});
				}, 200);
			});

			UserButton.onclick = () => { window.location = `user_space.html?user_id=${sessionStorage.getItem("CurrentUser")}`; };
			SearchButton.onclick = () => { ReloadGames(); };
			SelfOnlyButton.onclick = () => {
				EmailBox.value = sessionStorage.getItem("CurrentEmail");
				BeginDate.valueAsDate = new Date("2002/10/10");
				EndDate.valueAsDate = new Date();
				ReloadGames();
			};
			
			if (window.location.href.split("?").includes("self-only=1"))
				SelfOnlyButton.onclick();
			else
				ReloadGames();
		</script>
	</body>
</html>
